<template>
  <div>
    <choose></choose>
    <router-view></router-view>
    <!-- 左下角图示区 -->
    <div class="fix">
      <p><span style="background-color:red ;">￥90</span>A级</p>
      <p><span style="background-color:orange ;">￥100</span>B级</p>
      <p><span style="background-color:skyblue;">￥120</span>C级</p>
      <div class="centerInfo">
        <div class="centerInfo2">
          <span>{{ cinemaInfo.seatTypeList[0].name }}</span>
          <img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon" />
        </div>
        <div class="centerInfo2">
          <span>{{ cinemaInfo.seatTypeList[1].name }}</span>
          <img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon" />
        </div>
        <div class="centerInfo2">
          <span>{{ cinemaInfo.seatTypeList[2].name }}</span>
          <img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon" />
        </div>
        <div class="centerInfo2">
          <span>{{ cinemaInfo.seatTypeList[3].name }}</span>
          <img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon" />
        </div>
      </div>
    </div>
    <div class="title">{{ cinemaInfo.movieName }}</div>
    <div class="titleInfo">
      <div>{{ cinemaInfo.showTime }}</div>
      <div>{{ cinemaInfo.name }}</div>
    </div>

    <div class="screen">
      <div class="screen-text">屏幕方向</div>
    </div>
    <div class="box">
      <div v-for="(seatItem, index) in cinemaInfo.seatList" class="seatClass" :key="seatItem.id"
        @click="clickzuowei(seatItem)" :style="{
          height: height + 'rem',
          width: width + 'rem',
          top: seatItem.gRow * positionDistin + 'rem',
          left: seatItem.gCol * positionDistin + 'rem',
        }">
        <img class="seatImgClass" :seatId="seatItem.id" :seatIndex="index"
          :src="cinemaInfo.seatTypeList[seatItem.type].icon" />
      </div>
    </div>
    <!-- 右侧结算区 -->
    <div class="res">
      <p class="ed">已选座位：<span>{{ list.length }}</span></p>
      <p v-for="(item, index) in list" :key="index">{{ item }}</p>
      <p>看台：中国儿童中心剧院-海淀</p>
      <p>楼层：剧场</p>
      <p>价格：{{ sum }}</p>
      <!-- <router-link to="/pay"> -->
      <div class="btn" @click="ok">结账：{{ sum }}元</div>
      <!-- </router-link> -->
    </div>
  </div>
</template>
<script>
import choose from "@/components/choose.vue";
export default {
  data() {
    return {
      sum: 0,
      list: [],
      money: [],
      //影院 厅信息
      cinemaInfo: {
        errorCode: 0,
        errorMsg: "",
        name: "4号厅",
        movieName: "流浪地球",
        showTime: "2019-03-06 周五 16:50",
        cinema_name: "惊奇队长影院",
        //座位信息
        seatList: [
          {
            //座位id
            id: "16879097",
            //座位X轴实际位置，去掉过道
            row: "1",
            //座位Y轴实际位置，去掉过道
            col: "1",
            //座位X轴位置
            gRow: 1,
            //座位Y轴位置
            gCol: 4,
            //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879101",
            row: "1",
            col: "4",
            gRow: 1,
            gCol: 8,
            type: "2",
            flag: "0",
            price: "90",
          },
          {
            id: "16879104",
            row: "1",
            col: "7",
            gRow: 1,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879099",
            row: "1",
            col: "2",
            gRow: 1,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879102",
            row: "1",
            col: "5",
            gRow: 1,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879105",
            row: "1",
            col: "8",
            gRow: 1,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879100",
            row: "1",
            col: "3",
            gRow: 1,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879103",
            row: "1",
            col: "6",
            gRow: 1,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879107",
            row: "1",
            col: "9",
            gRow: 1,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879113",
            row: "2",
            col: "1",
            gRow: 2,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879117",
            row: "2",
            col: "4",
            gRow: 2,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879120",
            row: "2",
            col: "7",
            gRow: 2,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879124",
            row: "2",
            col: "10",
            gRow: 2,
            gCol: 14,
            type: "2",
            flag: "0",
            price: "90",
          },
          {
            id: "16879114",
            row: "2",
            col: "2",
            gRow: 2,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879118",
            row: "2",
            col: "5",
            gRow: 2,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879121",
            row: "2",
            col: "8",
            gRow: 2,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879125",
            row: "2",
            col: "11",
            gRow: 2,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879116",
            row: "2",
            col: "3",
            gRow: 2,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879119",
            row: "2",
            col: "6",
            gRow: 2,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879122",
            row: "2",
            col: "9",
            gRow: 2,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "90",
          },
          {
            id: "16879142",
            row: "3",
            col: "13",
            gRow: 3,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879129",
            row: "3",
            col: "2",
            gRow: 3,
            gCol: 2,
            type: "2",
            flag: "0",
            price: "120",
          },
          {
            id: "16879133",
            row: "3",
            col: "5",
            gRow: 3,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879136",
            row: "3",
            col: "8",
            gRow: 3,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879139",
            row: "3",
            col: "11",
            gRow: 3,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879143",
            row: "3",
            col: "14",
            gRow: 3,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879130",
            row: "3",
            col: "3",
            gRow: 3,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879134",
            row: "3",
            col: "6",
            gRow: 3,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879137",
            row: "3",
            col: "9",
            gRow: 3,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879141",
            row: "3",
            col: "12",
            gRow: 3,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879144",
            row: "3",
            col: "15",
            gRow: 3,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879128",
            row: "3",
            col: "1",
            gRow: 3,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879131",
            row: "3",
            col: "4",
            gRow: 3,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879135",
            row: "3",
            col: "7",
            gRow: 3,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879138",
            row: "3",
            col: "10",
            gRow: 3,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879154",
            row: "4",
            col: "9",
            gRow: 4,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879145",
            row: "4",
            col: "1",
            gRow: 4,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879158",
            row: "4",
            col: "12",
            gRow: 4,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879148",
            row: "4",
            col: "4",
            gRow: 4,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879161",
            row: "4",
            col: "15",
            gRow: 4,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879152",
            row: "4",
            col: "7",
            gRow: 4,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879155",
            row: "4",
            col: "10",
            gRow: 4,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879146",
            row: "4",
            col: "2",
            gRow: 4,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879159",
            row: "4",
            col: "13",
            gRow: 4,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879150",
            row: "4",
            col: "5",
            gRow: 4,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879153",
            row: "4",
            col: "8",
            gRow: 4,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879156",
            row: "4",
            col: "11",
            gRow: 4,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879147",
            row: "4",
            col: "3",
            gRow: 4,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879160",
            row: "4",
            col: "14",
            gRow: 4,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879151",
            row: "4",
            col: "6",
            gRow: 4,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879164",
            row: "5",
            col: "3",
            gRow: 5,
            gCol: 3,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879168",
            row: "5",
            col: "6",
            gRow: 5,
            gCol: 7,
            type: "0",
            flag: "0",
            price: "120",
          },
          {
            id: "16879171",
            row: "5",
            col: "9",
            gRow: 5,
            gCol: 10,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879175",
            row: "5",
            col: "12",
            gRow: 5,
            gCol: 14,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879178",
            row: "5",
            col: "15",
            gRow: 5,
            gCol: 17,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879162",
            row: "5",
            col: "1",
            gRow: 5,
            gCol: 1,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879165",
            row: "5",
            col: "4",
            gRow: 5,
            gCol: 4,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879169",
            row: "5",
            col: "7",
            gRow: 5,
            gCol: 8,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879172",
            row: "5",
            col: "10",
            gRow: 5,
            gCol: 11,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879176",
            row: "5",
            col: "13",
            gRow: 5,
            gCol: 15,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879163",
            row: "5",
            col: "2",
            gRow: 5,
            gCol: 2,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879167",
            row: "5",
            col: "5",
            gRow: 5,
            gCol: 6,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879170",
            row: "5",
            col: "8",
            gRow: 5,
            gCol: 9,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879173",
            row: "5",
            col: "11",
            gRow: 5,
            gCol: 12,
            type: "0",
            flag: "0",
            price: "100",
          },
          {
            id: "16879177",
            row: "5",
            col: "14",
            gRow: 5,
            gCol: 16,
            type: "0",
            flag: "0",
            price: "100",
          }
        ],
        seatTypeList: [
          {
            name: "可选",
            type: "0",
            seats: 1,
            icon: "选座沙发-灰色-放大.png",
            isShow: "1",
            position: "up",
          },
          {
            name: "已选",
            type: "0-1",
            seats: 1,
            icon: "选座沙发-蓝色-放大.png",
            isShow: "1",
            position: "up",
          },
          {
            name: "已售",
            type: "0-2",
            seats: 1,
            icon: "选座沙发-红色-放大.png",
            isShow: "1",
            position: "up",
          },
          {
            name: "维修",
            type: "0-3",
            seats: 1,
            icon: "沙发-投影-中间.png",
            isShow: "1",
            position: "up",
          }
        ],
      },
      width: 3.4, // 每个座位的宽
      height: 3.4, // 每个座位的高
      positionDistin: (4), // 每个座位偏移距离
    };
  },
  methods: {
    //点击座位的时候切换图片。
    clickzuowei(val) {
      console.log(val, "座位信息");
      //循环影厅内座位信息
      this.cinemaInfo.seatList.forEach((item) => {
        //判断：选中座位和数组内的id是否一致
        if (item.id == val.id) {
          //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
          if (item.type == 0) {
            item.type = 1;
            this.xinxi();
            this.sum += parseInt(item.price)
            //如果状态是1，也就是已经选中的状态，点击就会变成未选中
          } else if (item.type == 1) {
            item.type = 0;
            this.xinxi()
            this.sum -= parseInt(item.price)
            //如果状态2，也就是已经出售的座位，就提示从新选座
          } else if (item.type == 2) {
            alert("此座位已出售，请从新选座");
            //如果状态3，代表座位损坏，也是提示维修中。
          } else if (item.type == 3) {
            alert("此座位损坏，正在维修中！");
          }
        }
      });
    },
    //确认选座
    ok() {
      //筛选出选择的座位
      let info = this.cinemaInfo.seatList.filter((item) => {
        return item.type == 1;
      });

      if (info.length == 0) {
        alert("请先选择座位，再确认购买！");
      } else {
        this.$router.replace({ path: '/pay' })
      }
    },
    xinxi() {
      //筛选出选择的座位
      let info = this.cinemaInfo.seatList.filter((item) => {
        return item.type == 1;
      });
      this.list = [];
      //筛选出选择的座位排和列
      info.forEach((item) => {
        this.money = [];
        this.list.push(item.row + " 排 " + item.col + " 座");
        this.money.push(item.price + "元");
      });
      // this.sum += this.money;
      console.log(this.sum)
      // return this.sum;
      // console.log("选中的座位信息:", info);
      //有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座

    },
  },
  components:{
    choose
  }
};
</script>

<style scoepd>
.seatClass {
  position: absolute;
}

.box {
  position: relative;
  margin-top: -40px;
}

.seatImgClass {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.title {
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
  letter-spacing: 2px;
}

.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}

.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}

.centerInfo2 {
  display: flex;
  align-items: center;
}

.screen {
  width: 250px;
  border: 30px solid #ccc;
  border-color: #ccc transparent transparent transparent;
  height: 20px;
  margin: auto;
  margin-top: 10px;
}

.screen-text {
  text-align: center;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-top: -30px;
}

.res {
  width: 200px;
  position: absolute;
  top: 80px;
  right: 10px;

}

.btn {
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  color: #fff;
}

.ed {
  background-color: gray;
  line-height: 50px;
}

.fix {
  border: 1px gray solid;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 250px;
}

a {
  text-decoration: none;
}
</style>